<link href="/assets/home/css/order.css" rel="stylesheet" />
<link rel="stylesheet" href="/assets/home/plugin/mescroll/mescroll.min.css">
<script src="/assets/home/plugin/mescroll/mescroll.min.js"></script>

<body>
    <div id="mescroll" class="mescroll">
        <div class="page__bd">
            <div class="weui-tab">
                <div class="weui-tab__panel">
                    <div class="weui-form-preview" id="list">
                        
                    </div>
                    <br />
                </div>
            </div>
        </div>
    </div>
    
</body>
</html>

<script>
    var mescroll = new MeScroll('mescroll',{
        down:{
            auto:false,
            callback:DownCallback
        },
        up:{
            page:{
                page:0,
                size:20,
                time:null
            },
            auto:true,
            isBounce:false,
            callback:UpCallBack,
            htmlNodata: '<p class="upwarp-nodata">-- END --</p>',
            noMoreSize: 5,
            toTop:{
                duration:600,
                src:"/assets/home/images/mescroll-totop.png",
                offset:100
            }
        }
    })

    function DownCallback(){
        mescroll.resetUpScroll();
        $("#list").empty();
    }

    function UpCallBack(current){
        // 当前页码值
        page = current.num
        limit = current.size
        busid = {$busid};
        // console.log(page,limit,busid);
        // return ;

        // 组装数据
        var data = {
            page,
            limit
        }

        $.ajax({
            url:`{:url('home/business/record')}`,
            type:'post',
            data:data,
            dataType:'json',
            success:function(success){
                if(success.code == 0){
                    mui.toast(success.msg,{duration:1000})

                    mescroll.endBySize(0,0)
                    return false
                }

                var list = success.data.list
                var count = success.data.count

                mescroll.endBySize(list.length,count)
                FetchList(list)
            },
            error:function(error){
                console.log(error);
            }
        })
    }


    function FetchList(list){
        var html = ''
    
        for(var item of list){
            html += `
            <div class="weui-form-preview__hd">
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label">消费金额</label>
                    <em class="weui-form-preview__value">¥${Math.abs(item.total)}</em>
                </div>
            </div>
            <div class="weui-form-preview__bd">
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label">消费描述</label>
                    <span class="weui-form-preview__value">${item.content}</span>
                </div>
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label">消费时间</label>
                    <span class="weui-form-preview__value">${item.createtime_text}</span>
                </div>
            </div>
            `
        }   
        $("#list").append(html)
    }
</script>